<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="security" uri="http://www.springframework.org/security/tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../resources/js/jquery-1.6.js"></script>
<script type="text/javascript" src="../../resources/js/jquery.form.js"></script>
    <script type="text/javascript" src="../../resources/js/jquery-validation-1.8.0/jquery.validate.js"></script>
    <script type="text/javascript" src="../../resources/js/jquery-validation-1.8.0/additional-methods.js"></script>
    <script type="text/javascript" src="../../resources/js/jquery-ui-1.8.11.custom.min.js"></script>
    <script type="text/javascript" src="../../resources/js/jquery-ui-timepicker-addon.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="../../resources/css/start/jquery-ui-1.8.10.custom.css"/>
<style type="text/css">
	.ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; }
	.ui-timepicker-div dl{ text-align: left; }
	.ui-timepicker-div dl dt{ height: 25px; }
	.ui-timepicker-div dl dd{ margin: -25px 0 10px 65px; }
	.ui-timepicker-div td { font-size: 90%; }
</style>
<script type="text/javascript">
	$(document).ready(function() {

	    $("#registrationForm").validate({
        	submitHandler: function() {
                postSubmit();
            },
            rules: {
                date: {
                    required:true
                },
                city: {
                    min: 1,
                    required: true
                },
                startTime: {
                    required: true
                },
                endTime: {
                    required: true
                },
                about: {
                    required: true
                },
                wage: {
                    required: true,
                    min: 0
                },
                jobType: {
                    required: true
                }
            },
            messages: {
                date: {
                    required: "Это поле обязательно для заполнения"
                },
                city: {
                    min: "К сожалению, такого города нет в нашей базе данных",
                    required: "Это поле обязательно для заполнения"
                },
                startTime: {
                    required: "Это поле обязательно для заполнения"
                },
                endTime: {
                    required: "Это поле обязательно для заполнения"
                },
                about: {
                    required: "Это поле обязательно для заполнения"
                },
                wage: {
                    required: "Это поле обязательно для заполнения",
                    min: "Цена не может быть отрицательной"
                },
                jobType: {
                    required: "Это поле обязательно для заполнения"
                }
            }
        });

         $(".dateClass").datepicker({
            dateFormat : "yy-mm-dd",
            minDate : 0,
            yearRange: '-0:+2',
            //maxDate: new Date(20, 1 - 1, 1),
            changeMonth : true,
            changeYear : true
        });

        $(".removeBut").button({
                icons:{primary:'ui-icon-minus',secondary:'ui-icon-minusthick'}
        });

        $(".nextBut").button({
                icons:{primary:'ui-icon-plus',secondary:'ui-icon-plusthick'}
        });

        $(".timeClass").timepicker({
                showSecond: false,
                timeFormat: 'hh:mm:ss',
                onClose: function(e) {
                    var startTime, endTime;
                    if ($(this).attr('name').indexOf('start') >= 0) {
                        startTime = $(this);
                        endTime = $(this.nextElementSibling);
                    }
                    if ($(this).attr('name').indexOf('end') >= 0) {
                        endTime = $(this);
                        startTime = $(this.previousElementSibling);
                    }

                    if (startTime.val().trim() != "" && endTime.val().trim() != "" && startTime.val() > endTime.val()) {
                        //endTime.css('background-color','red');
                        endTime.val(startTime.val());
                    }

                }

            });

        $( "#radio" ).buttonset();

        $("#ccity").autocomplete({
            source: function(request, response) {
                jQuery.ajax({
                    url : "/search/cities",
                    dataType : "json",
                    data : {
                        term : request.term
                        //groupId : $("#groupId").val();
                    },
                    success : function(data) {
                        response(jQuery.map(data, function(item) {
                            return {
                                label: item.ruName,
                                value: item.ruName,
                                id: item.idCity
                            }
                        }))
                    }
                })
            },
            select: function(event, ui) {
                if (ui.item) {
                    putCityId(ui.item.id);
                }
            },
            minLength : 2,
            open : function() {
                $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
            },
            close: function() {
                $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
            }
        });

	});

	function putCityId(idCity) {
        $("#idCity").val(idCity);
    }

function addDateInputter(workDate, startTime, endTime){

		//$("#nextBut").replaceWith("<input class=\"removeBut\" type=\"button\" name=\"next\" value=\"-\" onclick=\"removeDateInputter()\"/><br/>");
		$("#cdate").append("<div class = \"concreteDate\" >");
		$("#cdate .concreteDate:last-child").append("<input class=\"dateClass\" type=\"text\" name=\"date\"/></span>");
		$("#cdate .concreteDate:last-child").append("<input class=\"timeClass\" type=\"text\" readonly=\"readonly\" name=\"startTime\"/></span>");
		$("#cdate .concreteDate:last-child").append("<input class=\"timeClass \" type=\"text\" readonly=\"readonly\" name=\"endTime\"/></span>");
		$("#cdate .concreteDate:last-child").append("<input class=\"removeBut \" type=\"button\" name=\"next\" value=\"-\" /></span>");
		$("#cdate .concreteDate:last-child").append("<input class=\"nextBut \" type=\"button\" name=\"next\" value=\"+\" onclick=\"addDateInputter()\"/><br/>");


        $(".timeClass").timepicker({
                showSecond: false,
                timeFormat: 'hh:mm:ss',
                onClose: function(e) {
                    var startTime, endTime;
                    if ($(this).attr('name').indexOf('start') >= 0) {
                        startTime = $(this);
                        endTime = $(this.nextElementSibling);
                    }
                    if ($(this).attr('name').indexOf('end') >= 0) {
                        endTime = $(this);
                        startTime = $(this.previousElementSibling);
                    }

                    if (startTime.val().trim() != "" && endTime.val().trim() != "" && startTime.val() > endTime.val()) {
                        //endTime.css('background-color','red');
                        endTime.val(startTime.val());
                    }

                }

            });

		$(".removeBut").click(function(obj) {
			removeDateInputter(obj.target);
		});

		$(".dateClass").datepicker({
            dateFormat : "yy-mm-dd",
            minDate : 0,
            yearRange: '-0:+2',
            //maxDate: new Date(20, 1 - 1, 1),
            changeMonth : true,
            changeYear : true
        });




        $(".removeBut").button({
                icons:{primary:'ui-icon-minus',secondary:'ui-icon-minusthick'}
        });

        $(".nextBut").button({
                icons:{primary:'ui-icon-plus',secondary:'ui-icon-plusthick'}
        });

	}

	function removeDateInputter(obj){
		if ($(".concreteDate").size()>1){
		    $(obj).parent(".concreteDate").remove();
		}
	}

</script>
</head>
<body>
<form class="cmxform" id="registrationForm" method="post" action="/works/create">
    <fieldset>
        <!--<legend>Input information about work</legend>-->

		<p>
    		<label for="ccity">Город *</label>
    		<em></em><input id="ccity" title="Начните печатать название города и выберите Ваш город из выпавшего списка."
    		name="visicity" size="25" class="required"/>
    		<input id="idCity" type="hidden" name="city" />
		</p>

        <p>
            <label for="cwage">Цена *</label>
            <em></em><input id="cwage" name="wage" value="0.0" size="25" class="required"/> грн.
        </p>

     	<p>
            <label for="cjobTypesEnd">Тип работы *</label><em></em>
            <div id="radio">
            <c:forEach var="jobType" items="${jobTypes}">
             <input type="radio" id="radio${jobType.idJob}" name="jobType" value="${jobType.idJob}" class="required" />
             <label for="radio${jobType.idJob}" >${jobType.title}</label>
            </c:forEach>
            <input id="cjobTypesEnd" type="hidden"/>
            </div>
        </p>

		<p>
			<label for="cabout">О работе *</label>
			<em></em><textarea id="cabout" name="about"></textarea>
		</p>

        <p>
			<label for="cdate">Даты *</label>
			<em></em>

        <div id="cdate">

					<div class="concreteDate">
					<input class="dateClass" type="text" value="" readonly="readonly" name="date"/><input class="timeClass" type="text" value="" readonly="readonly" name="startTime"/><input class="timeClass" type="text" value="" readonly="readonly" name="endTime"/><input class="removeBut" type="button" name="next" value="-"/><input class="nextBut " type="button" name="next" value="+" onclick="addDateInputter()"/><br/>
					</div>
			</div>
		 </p>

       <input class="submit" type="submit" value="Submit"/>

    </fieldset>
</form>
</body>
</html>